<template>
  <div class="notifier">
    <a-drawer :width="550" title="抄送人设置" placement="right" :closable="false" :visible="show" @close="onClose">
      <p>抄送人</p>
      <a-space>
        <a-button class="mg_b20" type="primary" @click="addEmployee">
          添加公司管理员
        </a-button>
        <div v-if="choseEmployees.length > 0" class="chosed-user mg_b10">
          <a-tag v-for="(item, idx) in choseEmployees" :key="idx">
            {{ item.name }}
          </a-tag>
        </div>
        <!-- <a-button class="mg_b20" type="primary" @click="addRole">
          添加角色
        </a-button> -->
        <div v-if="choseRoles.length > 0" class="chosed-user mg_b10">
          <a-tag v-for="(item, idx) in choseRoles" :key="idx">
            {{ item.name }}
          </a-tag>
        </div>
      </a-space>
      <div class="mg_t20">
        <a-checkbox v-model="options.isUserChose">
          允许发起人自选抄送人
        </a-checkbox>
      </div>
      <div class="draw-foot">
        <a-button :style="{ marginRight: '8px' }" @click="onClose">
          取消
        </a-button>
        <a-button type="primary" @click="onOk">确认</a-button>
      </div>
    </a-drawer>
    <employee-select :show.sync="employeeVisible" :default-selected-keys="defaultEmployeeKeys" :title="title" @change="onEmployeeChange" />

    <role-select :show.sync="roleVisible" :default-selected-keys="defaultRoleKeys" @change="onRoleChange" />
  </div>
</template>

<script>
// import EmployeeSelect from "@/components/RoleSelect/employee-select";
import EmployeeSelect from "@/components/EmployeeSelect2/employeeSelect5";
// import EmployeeSelect from "@/components/EmployeeSelect2/employeeSelect6";
import RoleSelect from "@/components/EmployeeSelect2/employeeSelect7";
// import RoleSelect from "@/components/RoleSelect";
import { isJson } from "@/utils/index";
export default {
  name: "NotifierDrawer",
  components: {
    EmployeeSelect,
    RoleSelect
  },
  props: {
    notifOptions: {
      type: Object,
      default: () => {}
    },
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      title: "",
      auto: true,
      employeeVisible: false,
      roleVisible: false,
      defaultEmployeeKeys: [],
      defaultRoleKeys: [],
      choseEmployees: [], // 选中的成员
      choseRoles: [],
      copyOptions: {},
      options: {}
    };
  },

  watch: {
    show(val) {
      if (val) {
        this.copyOptions = JSON.parse(JSON.stringify(this.notifOptions));
        this.initOptions(this.notifOptions);
      }
    }
  },
  created() {
    this.initOptions(this.notifOptions);
  },

  methods: {
    initOptions(val) {
      this.options = Object.assign({}, val, {
        props: isJson(val.props) ? JSON.parse(val.props) : val.props
      });
      if (!!this.options.userIds) {
        //  this.defaultEmployeeKeys = this.options.userIds.split(',')
        this.defaultEmployeeKeys = this.options.props.employeeList;
        this.choseEmployees = this.options.props.employeeList;
      }
      if (!!this.options.roles) {
        // this.defaultRoleKeys = this.options.roles.split(',')
        this.defaultRoleKeys = this.options.props.roleList;
        this.choseRoles = this.options.props.roleList;
      }
    },
    onEmployeeChange(data) {
      this.defaultEmployeeKeys = data;
      this.choseEmployees = data;
      this.options.userIds = this.choseEmployees.map(item => item.id).toString();
      this.options.props.employeeList = this.choseEmployees;
    },
    onRoleChange(data) {
      this.defaultRoleKeys = data;
      this.choseRoles = data;
      this.options.roles = this.choseRoles.map(item => item.id).toString();
      this.options.props.roleList = this.choseRoles;
    },
    addEmployee() {
      this.title = "成员";
      this.employeeVisible = true;
    },
    addRole() {
      this.title = "角色";
      this.roleVisible = true;
    },
    onClose() {
      this.$emit("update:show", false);
      this.$emit("change", this.copyOptions);
    },
    onOk() {
      this.options.props.name = []
        .concat(this.choseRoles, this.choseEmployees)
        .map(item => item.name)
        .toString();
      this.$emit("update:show", false);
      this.$emit("change", this.options);
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../../styles/notifierDrawer.scss";
</style>
